<template>
  <div class="container">
    <div class="container--item__tel">
      <input type="tel" placeholder="请输入手机号码"
             @keydown="tellShow"
             @focus="tellFocusShow"
             @blur="tellVanish"
             v-model="tell" id="tel">
      <img src="../assets/register/error.png"
           class="container--img__error"
           @click="tellClick"
           v-show="tellDltBoole" alt="#">
    </div>
    <div class="container--item__tel">
      <input type="tel" placeholder="请输入短信验证码" v-model="code" id="code">
      <span class="container--text__code"
            v-if="getCodeBoole" ref="getCode" @click="obtainCode">{{counter}}</span>
      <span class="container--text__code"
            v-if="!getCodeBoole" ref="getCode">{{counter}}</span>
    </div>
    <div class="container--item__tel">
      <input type="password" placeholder="请输入6~12位密码"
             @keydown="passwordShow"
             @focus="passwordFocusShow"
             @blur="passwordVanish"
             v-model="password" id="password">
      <img src="../assets/register/error.png"
           class="container--img__error"
           @click="pasClick"
           v-show="passwordDltBoole" alt="#">
    </div>
    <div class="container--item__btn" @click="reg">
      设置密码
    </div>
  </div>
</template>

<script>
import { Throttle } from '../publicFunction';

export default {
  name: 'resetPassword',
  data() {
    return {
      tell: '',
      code: '',
      password: '',
      counter: '获取验证码',
      tellDltBoole: false,
      passwordDltBoole: false,
      getCodeBoole: true,
    };
  },
  methods: {
    tellShow() {
      this.tellDltBoole = true;
    },
    passwordShow() {
      this.passwordDltBoole = true;
    },
    /* eslint-disable */
    tellFocusShow() {
      this.tell.length > 0 ? this.tellDltBoole = true : '';
    },
    passwordFocusShow() {
      this.password.length > 0 ? this.passwordDltBoole = true : '';
    },
    tellVanish() {
      this.tellDltBoole = false;
    },
    passwordVanish() {
      this.passwordDltBoole = false;
    },
    tellClick() {
      this.tell = '';
    },
    pasClick() {
      this.password = '';
    },
    obtainCode() {
      this.$api.resetPasswordGetCode({ tell: this.tell })
        .then((data) => {
          console.log(data);
          if (data.data.code === 1) {
            this.getCodeBoole = !this.getCodeBoole;
            this.$popUp({
              message: data.data.msg,
            });
            let time = null, num = 59;
            time = setInterval(() => {
              this.counter = `等待${num}s`;
              if (num === 0) {
                this.getCodeBoole = !this.getCodeBoole;
                clearInterval(time);
                this.counter = '重新获取';
              } else {
                num --;
              }
            }, 1000);
          } else if (data.data.code === -1) {
            this.$popUp({
              message: data.data.msg,
            });
          } else {
            this.$popUp({
              message: data.data.msg,
            });
          }
        })
        .catch((error) => {
          this.$popUp({
            message: error.data.msg,
          });
        });
    },
    reg: Throttle(function () {
      if (this.code) {
        if (this.password.length > 5 && this.password.length < 13) {
          this.$api.resetPassword({
            code: this.code,
            password: this.password,
          })
            .then((data) => {
              if (data.data.code === 1) {
                this.$router.push({ name: 'auth' });
                this.$popUp({
                  message: data.data.msg,
                });
              } else {
                this.$popUp({
                  message: data.data.msg,
                });
              }
            })
            .catch(() => {
              this.$popUp({
                message: '注册失败！',
              });
            });
        } else {
          this.$popUp({
            message: '请填写规范的密码'
          })
        }
      } else {
        this.$popUp({
          message: '请填写正确的验证码'
        })
      }
    },500),
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container{
  width: 100vw;
  height: 100vh;
.container--item__tel{
    position: relative;
    left: 8%;
    right: 8%;
    height: 1.3333333rem;
    width: 84%;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    .container--img__error{
      width: .4rem;
      height: .4rem;
      position: absolute;
      right: .613333333rem;
      top: .46666665rem;
    }
    #tel,#code,#password{
      margin-left: .45333333rem;
      outline:none;
      border-width:0;
      height: 100%;
      font-size: .34666666rem;
      width: 60%;
    }
    .container--text__code{
      font-size: .4rem;
      color: #609aeb;
      display: block;
      position: absolute;
      right: .24rem;
      top: .4rem;
    }
}
.container--item__btn{
  position: absolute;
  left: 1.28rem;
  right: 1.28rem;
  top: 6rem;
  line-height: 1.066666rem;
  text-align: center;
  border-radius: 30px;
  background-color: #3c9dfc;
  color: #fff;
  font-size: .4266666rem;
}
.container--item__btn:active{
  background-color: #338fe3;
}
}
</style>
